<template>
  <div class="program-real-time">
    <div id="program-process" style="height: 450px"></div>

    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      :header-cell-style="headerRowStyle"
      style="width: 100%"
    >
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column label="项目编号" prop="date"> </el-table-column>
      <el-table-column label="项目名称" prop="name">
        <template #default="scope">
          <div style="position: relative">{{ scope.row.name }}</div>
          <div class="program-tips">
            <i class="iconfont icon-jinggao"></i> 疑似重复立项
          </div>
        </template>
      </el-table-column>
      <el-table-column label="项目类型" prop="name"> </el-table-column>
      <el-table-column label="项目负责人" prop="name"> </el-table-column>
      <el-table-column label="计划开始时间" prop="name"> </el-table-column>
      <el-table-column label="计划结束时间" prop="name"> </el-table-column>
      <el-table-column label="计划时间" prop="name"> </el-table-column>
      <el-table-column label="计划周期" prop="name"> </el-table-column>
      <el-table-column label="实际周期" prop="name"> </el-table-column>
      <el-table-column label="项目进度" prop="name"> </el-table-column>
      <el-table-column label="计划成本" prop="name"> </el-table-column>
      <el-table-column label="实际已使用成本" prop="name"> </el-table-column>
      <el-table-column label="项目状态" prop="name">
        <template #default="scope">
          <div
            :style="{ color: scope.$index % 2 == 0 ? '#3BA0EE' : '#F6AB00' }"
          >
            {{ scope.$index % 2 == 0 ? "未开始" : "进行中" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="风险状态" prop="name" width="90">
        <template #default="scope">
          <div
            :style="{
              color: jugeColor(scope.$index),
              backgroundColor: jugeBackGround(scope.$index),
            }"
          >
            <div class="status">
              <img
                v-if="scope.$index == 0"
                :src="require('@/assets/program_images/ic-zhengchang@2x.png')"
                style="width: 11px; height: 11px"
              />
              <img
                v-else-if="scope.$index == 1"
                :src="require('@/assets/program_images/ic-yuqi@2x.png')"
                style="width: 11px; height: 11px"
              />
              <img
                v-else
                :src="require('@/assets/program_images/ic-youfengxian@2x.png')"
                style="width: 11px; height: 11px"
              />
              <div v-if="scope.$index % 3 == 0">正常</div>
              <div v-else-if="scope.$index % 3 == 1">风险</div>
              <div v-else>已逾期</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="name"> </el-table-column>
      <el-table-column align="right" width="140">
        <template #header>
          <el-input v-model="search" size="mini" placeholder="输入项目关键词" />
        </template>
        <template #default="scope">
          <el-space wrap :size="10">
            <el-button
              type="text"
              :style="{ color: '#00796A' }"
              @click="handleDetail(scope.$index, scope.row)"
              >详情</el-button
            >
            <el-button
              type="text"
              :style="{ color: '#3BA0EE' }"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </el-space>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
var echarts = require("echarts");
const colors = ["#56ADF0", "#D29CFF", "#60E6DF"];

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      search: "",
    };
  },
  methods: {
    /**
     * 文字颜色
     */
    jugeColor(e) {
      if (e % 3 === 0) {
        return "#36E2C3";
      }
      if (e % 3 === 1) {
        return "#DCB735";
      }
      if (e % 3 === 2) {
        return "#B86A6A";
      }
    },
    jugeBackGround(e) {
      if (e % 3 === 0) {
        return "#E4FEF9";
      }
      if (e % 3 === 1) {
        return "#F4FFEB";
      }
      if (e % 3 === 2) {
        return "#FFEFEF";
      }
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDetail(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/program-manager/program-detail",
        query: {
          id: 3,
        },
      });
    },
    headerRowStyle() {
      return { backgroundColor: "#E8E8E8", color: "#333333" };
    },
  },
  mounted() {
    var programProcess = document.getElementById("program-process");
    var parentNode = programProcess.parentNode;
    programProcess.style.width = parentNode.offsetWidth - 200 + "px";
    var myChart = echarts.init(programProcess);
    var option = {
      color: colors,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      grid: {
        right: "300px",
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
          magicType: {
            type: ["line", "bar"],
          },
        },
      },
      legend: {
        data: ["蒸发量", "降水量", "平均温度"],
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "蒸发量",
          min: 0,
          max: 250,
          position: "right",
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[0],
            },
          },
          axisLabel: {
            formatter: "{value} ml",
          },
        },
        {
          type: "value",
          name: "降水量",
          min: 0,
          max: 250,
          position: "right",
          offset: 80,
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[1],
            },
          },
          axisLabel: {
            formatter: "{value} ml",
          },
        },
        {
          type: "value",
          name: "温度",
          min: 0,
          max: 25,
          position: "left",
          axisLine: {
            show: true,
            lineStyle: {
              color: colors[2],
            },
          },
          axisLabel: {
            formatter: "{value} °C",
          },
        },
      ],
      series: [
        {
          name: "蒸发量",
          type: "line",
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
          ],
        },
        {
          name: "降水量",
          type: "line",
          yAxisIndex: 1,
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
          ],
        },
        {
          name: "平均温度",
          type: "line",
          yAxisIndex: 2,
          data: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
          ],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>
<style lang="less" scoped>
.program-real-time {
  text-align: center;
}
.status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 5px;
  & > div {
    margin-left: 5px;
  }
}
.program-tips {
  position: absolute;
  left: 30px;
  bottom: 0px;
  color: #e62929;
  width: 200px;
  z-index: 200;
}
</style>